<div class="page">
    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Responsive Table - Simple</strong></div>
        <div class="panel-body">

            <div class="table-responsive">
                <table class="table table-striped table-bordered">
                    <thead>
                        <tr>
                            <th>#</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                            <th>Table heading</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                        <tr>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                            <td>Table cell</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>
    </section>


    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Responsive Table - Normal</strong></div>
        <div class="panel-body">
            <table class="responsive table table-striped">
                <thead>
                    <tr>
                        <th>Rank</th>
                        <th>Movie Title</th>
                        <th>Year</th>
                        <th>Rating</abbr></th>
                        <th>Reviews</th>
                        <th>Director</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <th>1</th>
                        <td>Citizen Kane</td>
                        <td>1941</td>
                        <td>100%</td>
                        <td>74</td>
                        <td>Orson Welles</td>
                    </tr>
                    <tr>
                        <th>2</th>
                        <td>Casablanca</td>
                        <td>1942</td>
                        <td>97%</td>
                        <td>64</td>
                        <td>Michael Curtiz</td>
                    </tr>
                    <tr>
                        <th>3</th>
                        <td>The Godfather</td>
                        <td>1972</td>
                        <td>97%</td>
                        <td>87</td>
                        <td>Francis Ford Coppola</td>
                    </tr>
                    <tr>
                        <th>4</th>
                        <td>Gone with the Wind</td>
                        <td>1939</td>
                        <td>96%</td>
                        <td>87</td>
                        <td>Victor Fleming</td>
                    </tr>
                    <tr>
                        <th>5</th>
                        <td>Lawrence of Arabia</td>
                        <td>1962</td>
                        <td>94%</td>
                        <td>87</td>
                        <td>Sir David Lean</td>
                    </tr>
                    <tr>
                        <th>6</th>
                        <td>Dr. Strangelove Or How I Learned to Stop Worrying and Love the Bomb</td>
                        <td>1964</td>
                        <td>92%</td>
                        <td>74</td>
                        <td>Stanley Kubrick</td>
                    </tr>
                    <tr>
                        <th>7</th>
                        <td>The Graduate</td>
                        <td>1967</td>
                        <td>91%</td>
                        <td>122</td>
                        <td>Mike Nichols</td>
                    </tr>
                    <tr>
                        <th>8</th>
                        <td>The Wizard of Oz</td>
                        <td>1939</td>
                        <td>90%</td>
                        <td>72</td>
                        <td>Victor Fleming</td>
                    </tr>
                    <tr>
                        <th>9</th>
                        <td>Singin' in the Rain</td>
                        <td>1952</td>
                        <td>89%</td>
                        <td>85</td>
                        <td>Stanley Donen, Gene Kelly</td>
                    </tr>
                    <tr>
                        <th>10</th>
                        <td>Inception</td>
                        <td>2010</td>
                        <td>84%</td>
                        <td>78</td>
                        <td>Christopher Nolan</td>
                    </tr>
                </tbody>
            </table>            
        </div>
    </section>

    <section class="panel panel-default">
        <div class="panel-heading"><strong><span class="glyphicon glyphicon-th"></span> Responsive Table - Flip Scroll</strong></div>
        <div class="panel-body">
            <section class="table-flip-scroll">
                <table class="table table-bordered table-striped cf">
                    <thead class="cf">
                        <tr>
                            <th>Code</th>
                            <th>Company</th>
                            <th class="numeric">Price</th>
                            <th class="numeric">Change</th>
                            <th class="numeric">Change %</th>
                            <th class="numeric">Open</th>
                            <th class="numeric">High</th>
                            <th class="numeric">Low</th>
                            <th class="numeric">Volume</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>AAC</td>
                            <td>AUSTRALIAN AGRICULTURAL COMPANY LIMITED.</td>
                            <td class="numeric">$1.38</td>
                            <td class="numeric">-0.01</td>
                            <td class="numeric">-0.36%</td>
                            <td class="numeric">$1.39</td>
                            <td class="numeric">$1.39</td>
                            <td class="numeric">$1.38</td>
                            <td class="numeric">9,395</td>
                        </tr>
                        <tr>
                            <td>AAD</td>
                            <td>ARDENT LEISURE GROUP</td>
                            <td class="numeric">$1.15</td>
                            <td class="numeric">  +0.02</td>
                            <td class="numeric">1.32%</td>
                            <td class="numeric">$1.14</td>
                            <td class="numeric">$1.15</td>
                            <td class="numeric">$1.13</td>
                            <td class="numeric">56,431</td>
                        </tr>
                        <tr>
                            <td>AAX</td>
                            <td>AUSENCO LIMITED</td>
                            <td class="numeric">$4.00</td>
                            <td class="numeric">-0.04</td>
                            <td class="numeric">-0.99%</td>
                            <td class="numeric">$4.01</td>
                            <td class="numeric">$4.05</td>
                            <td class="numeric">$4.00</td>
                            <td class="numeric">90,641</td>
                        </tr>
                        <tr>
                            <td>ABC</td>
                            <td>ADELAIDE BRIGHTON LIMITED</td>
                            <td class="numeric">$3.00</td>
                            <td class="numeric">  +0.06</td>
                            <td class="numeric">2.04%</td>
                            <td class="numeric">$2.98</td>
                            <td class="numeric">$3.00</td>
                            <td class="numeric">$2.96</td>
                            <td class="numeric">862,518</td>
                        </tr>
                        <tr>
                            <td>ABP</td>
                            <td>ABACUS PROPERTY GROUP</td>
                            <td class="numeric">$1.91</td>
                            <td class="numeric">0.00</td>
                            <td class="numeric">0.00%</td>
                            <td class="numeric">$1.92</td>
                            <td class="numeric">$1.93</td>
                            <td class="numeric">$1.90</td>
                            <td class="numeric">595,701</td>
                        </tr>
                        <tr>
                            <td>ABY</td>
                            <td>ADITYA BIRLA MINERALS LIMITED</td>
                            <td class="numeric">$0.77</td>
                            <td class="numeric">  +0.02</td>
                            <td class="numeric">2.00%</td>
                            <td class="numeric">$0.76</td>
                            <td class="numeric">$0.77</td>
                            <td class="numeric">$0.76</td>
                            <td class="numeric">54,567</td>
                        </tr>
                        <tr>
                            <td>ACR</td>
                            <td>ACRUX LIMITED</td>
                            <td class="numeric">$3.71</td>
                            <td class="numeric">  +0.01</td>
                            <td class="numeric">0.14%</td>
                            <td class="numeric">$3.70</td>
                            <td class="numeric">$3.72</td>
                            <td class="numeric">$3.68</td>
                            <td class="numeric">191,373</td>
                        </tr>
                        <tr>
                            <td>ADU</td>
                            <td>ADAMUS RESOURCES LIMITED</td>
                            <td class="numeric">$0.72</td>
                            <td class="numeric">0.00</td>
                            <td class="numeric">0.00%</td>
                            <td class="numeric">$0.73</td>
                            <td class="numeric">$0.74</td>
                            <td class="numeric">$0.72</td>
                            <td class="numeric">8,602,291</td>
                        </tr>
                        <tr>
                            <td>AGG</td>
                            <td>ANGLOGOLD ASHANTI LIMITED</td>
                            <td class="numeric">$7.81</td>
                            <td class="numeric">-0.22</td>
                            <td class="numeric">-2.74%</td>
                            <td class="numeric">$7.82</td>
                            <td class="numeric">$7.82</td>
                            <td class="numeric">$7.81</td>
                            <td class="numeric">148</td>
                        </tr>
                        <tr>
                            <td>AGK</td>
                            <td>AGL ENERGY LIMITED</td>
                            <td class="numeric">$13.82</td>
                            <td class="numeric">  +0.02</td>
                            <td class="numeric">0.14%</td>
                            <td class="numeric">$13.83</td>
                            <td class="numeric">$13.83</td>
                            <td class="numeric">$13.67</td>
                            <td class="numeric">846,403</td>
                        </tr>
                        <tr>
                            <td>AGO</td>
                            <td>ATLAS IRON LIMITED</td>
                            <td class="numeric">$3.17</td>
                            <td class="numeric">-0.02</td>
                            <td class="numeric">-0.47%</td>
                            <td class="numeric">$3.11</td>
                            <td class="numeric">$3.22</td>
                            <td class="numeric">$3.10</td>
                            <td class="numeric">5,416,303</td>
                        </tr>
                    </tbody>
                </table>
            </section>
        </div>
    </section>

</div>

